<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="js/echarts.js"></script>
    
</head>
<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM--->
    <div id="main" style="width: 500px; height: 400px"></div>
    <script type="text/javascript">
        //基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //指定图表的配置项和数据
        var option = {  //指定图表的配置项和数据
            backgroundColor: 'rgba(204,204,204,0.7)',  //配置背景色，默认无背景
            title: {  //配置标题组件
                text: '每年各国影响力', textStyle: { color: 'blue' },
                top: 20, left: 30
            },
            tooltip: { trigger: 'item', backgroundColor: 'rgba(0,0,250,0.8)' },
            legend: {  //配置图例组件
                type: 'scroll', bottom: 15,
                data: (function () {
                    var list = [];
                    for (var i = 1; i <= 28; i++) {
                        list.push(i + 2000 + '');
                    }
                    return list;
                })()
            },
            visualMap: { top: '47%', right: 20, color: ['red', 'yellow'], calculable: true },
            radar: {  //配置雷达图坐标系组件，只适用于雷达图
                nameGap: 2,  //设置指示器名称和指示器轴的距离，默认为15
                indicator: [  //设置雷达图指示器，指定雷达图中的多个变量，跟data中value对应
                    { text: '日本', max: 400, color: 'green' },
                    { text: '韩国', max: 400, color: 'green' },
                    { text: '俄罗斯', max: 400, color: 'blue' },
                    { text: '美国', max: 400, color: 'blue' },
                    { text: '中国', max: 400, color: 'red' }
                ]
            },
            series: (function (data) { //配置数据系列
            	
                var series = [];
                for (var i = 1; i <= 28; i++) {
                    series.push({
                        name: '(数据纯属虚构)', type: 'radar', symbol: 'none',
                        lineStyle: { width: 1 },
                        emphasis: { areaStyle: { color: 'rgba(0,250,0,0.3)' } },
                        data: [  //设置雷达图的数据是多变量（维度）
                            {
                                value: [
                                    (40 - i) * 10,
                                    (38 - i) * 4 + 60,
                                    i * 5 + 10,
                                    i * 9,
                                    i * i / 2
                                  
                                ],
                                name: i + 2000 + ''
                            }]
                       
                    });
                     
                }
               myChart.on('click',function(params) {
				console.log(params.data);  //   点击log输出事件
			});
                return series;
            })()
        };
        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option); 
    </script>
</body>

</html>